<template>
    <div class="login-container">
      <el-form class="card-box login-form" autoComplete="on" :model="ruleForm" :rules="rules" ref="ruleForm">
        <h3 class="title">管理后台</h3>
        <el-form-item prop="username" class="item">
            <el-input placeholder="请输入用户名" name="username" @keyup.enter.native="handleLogin" autoComplete="on" v-model="ruleForm.username">
              <i class="el-icon-user el-input__icon" slot="prefix"></i>
            </el-input>
        </el-form-item>
        <el-form-item prop="password" class="password">
            <el-input placeholder="请输入密码" name="password" type="password" @keyup.enter.native="handleLogin" v-model="ruleForm.password">
              <i class="el-icon-unlock el-input__icon" slot="prefix"></i>
            </el-input>
        </el-form-item>
        <el-button class="loginBtn" type="primary" style="width:100%;margin-bottom: 100px;" :loading="loading" @click.native="handleLogin()">登录 </el-button>
      </el-form>
    </div>
</template>

<script>
import { mapMutations } from 'vuex';
export default {
    data() {
        return {
            ruleForm: {
                username: "",
                password: "",
            },
            rules: {
                username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
                password: [{ required: true, message: "请输入密码", trigger: "blur" }],
            },
            isShowPwd: false, // 是否显示密码
            loading: false, // 登录loading
            showDialog: false, // 显示dialog
            redirect: null // 回调地址
        };
    },
    mounted() {
      // this.changeCaptcha();
    },
    methods: {
		  ...mapMutations(['SET_TOKEN']),
      changeCaptcha() {
        const t = new Date().getTime();
        this.$refs['imgCaptcha'].src = `/api/captchaCode?t=${t}`;
      },
      handleLogin(){
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            vm.sendAxiosPromise({
              method: "post",
              url: vm.ApiSet.adminLogin,
              data: this.ruleForm,
              loading: true,
              target: document.querySelector('.loginBtn')
            }).then(res=>{
              if(res.data){
                this.SET_TOKEN(res.data.token)
                this.$router.push('/');
              }
            })
          }
        });
      }
    },
};
</script>

<style lang="less" scoped>
  @import './login.less';
</style>

